<template>
  <div v-show="visible" class="wot-template-field-table">
    <c-row-search>
      <c-row margin>
        <c-col>
          <el-input
            v-model="keyword"
            @keyup.enter.native="query"
            clearable
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </c-col>
        <c-col>
          <el-button type="primary" @click="query">
            {{ multLang('btn_search_a') }}
          </el-button>
        </c-col>
      </c-row>
      <template #right>
        <FieldSelect :data="data" @submit="submit"></FieldSelect>
      </template>
    </c-row-search>
    <c-table
      ref="table"
      height="calc(100% - 56px)"
      index
      :data="table.data"
      :col="col"
    >
      <template #opn="{ row }">
        <el-button type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>
        <el-button type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
      </template>
    </c-table>
    <TemplateFieldAev
      ref="TemplateFieldAev"
      :data="table.click"
      @query="query"
    ></TemplateFieldAev>
  </div>
</template>
<script>
import { searchWord } from '@/util/data'
import FieldSelect from './FieldSelect.vue'
import TemplateFieldAev from './TemplateFieldAev.vue'
import {
  addTemplateFiledData,
  delTemplateFiledData,
  getTemplateFiledData
} from '@/http/api/v1/wot'
export default {
  name: 'TemplateFieldTable',
  components: { FieldSelect, TemplateFieldAev },
  props: {
    visible: { type: Boolean, default: false },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      keyword: '',
      table: {
        data: [],
        click: {},
        select: ''
      },
      filterData: []
    }
  },
  computed: {
    workColumnMap() {
      return this.optionMap('work_column')
    },
    blockMap() {
      return this.optionMap('block')
    },
    operationPermissionMap() {
      return this.optionMap('operation_permission')
    },
    col() {
      return [
        {
          label: 'title_name_ab_r',
          prop: 'field_code'
        },
        {
          label: 'title_name_c',
          prop: 'field_name',
          formatter: (row, { property }) => this.multLang(row[property])
        },
        {
          label: 'title_category_ah',
          prop: 'field_view_type',
          formatter: (row, { property }) => this.workColumnMap[row[property]]
        },
        {
          label: 'title_qe',
          prop: 'field_section_type',
          formatter: (row, { property }) => this.blockMap[row[property]]
        },
        {
          label: 'title_aas_b',
          prop: 'field_remark'
        }
      ]
    }
  },
  watch: {
    data() {
      this.query()
    }
  },
  beforeCreate() {},
  created() {
    this.setOption({ key: 'work_column' })
    this.setOption({ key: 'block' })
    this.setOption({ key: 'operation_permission' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.filterData = searchWord(this.keyword, this.data, 'label')
    },
    query() {
      const { work_template_code } = this.data
      work_template_code &&
        getTemplateFiledData({
          work_template_code,
          keywordSearch: this.keyword
        }).then(({ data }) => {
          this.table.data = data || []
        })
    },
    edit(row) {
      this.table.click = row || {}
      this.$refs.TemplateFieldAev.edit()
    },
    del(row) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_ng']),
        this.multLang('btn_delete_a', 'title_ng'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const { work_template_code } = this.data
        const { field_form_code } = row || {}
        work_template_code &&
          field_form_code &&
          delTemplateFiledData({ work_template_code, field_form_code }).then(
            ({ code }) => {
              if (code === 200) {
                this.query()
              }
            }
          )
      })
    },
    submit(field_form_codes) {
      const { work_template_code } = this.data
      work_template_code &&
        addTemplateFiledData({
          work_template_code,
          field_form_codes
        }).then(({ code }) => {
          if (code === 200) {
            this.query()
          }
        })
    }
  }
}
</script>
<style lang="scss">
.wot-template-field-table {
  margin-top: 10px;
}
</style>
